<template>
  <div class="max">
    <div class="img">
      <img src="../../assets/img/login.jpg" />
    </div>
    <div class="ver">
      <template v-if="bool">
          <h1 style="text-indent: 5%; padding-top: 20px;">手机验证码登录</h1>
          <div class="input">
            <van-cell-group inset>
              <van-field
                clearable
                style="background-color:#faf8f6;width: 95%; margin:0px 2.5%;"
                v-model="value1"
                size="large"
                label-width="2.5em"
                label="+86"
                left-icon="user-o"
                placeholder="请输入手机号码"
                />
              <van-field
                v-model="sms"
                center
                clearable
                style="background-color:#faf8f6;margin-top:20px;width: 95%; margin: 20px 2.5%;"
                left-icon="password-o"
                placeholder="请输入验证码"
              >
                <template #button>
                  <van-button 
                    size="small" 
                    style="background-color:#faf8f6; color:#ec7b67;border:none;"
                    @click="btn"
                    :text="txt"
                    >
                  </van-button>
                </template>
              </van-field>
            </van-cell-group>
            
          </div>
          <p @click="jump" class="pp" style="color:#ec7b67;text-indent:20px;margin-top:20px;font-size:14px">账号密码登录</p>
      </template>

      <template v-if="boolpwd">
        <h1 style="text-indent: 5%; padding-top: 20px;">账号密码登录</h1>
        <div class="input">
          <van-cell-group inset>
            <van-field
              style="background-color:#faf8f6;width: 95%;margin-left: 2.5%;"
              v-model="tele"
              size="large"
              left-icon="user-o"
              placeholder="请输入手机号码"
              />
            <van-field
              style="background-color:#faf8f6;width: 95%; margin: 20px 2.5%;"
              v-model="pwd"
              size="large"
              left-icon="contact"
              placeholder="请输入密码"
            />
          </van-cell-group>
          
        </div>
        <div class="dd">
            <span @click="jumpmess" style="color:#ec7b67;margin:20px 5%;font-size:14px">免密登录</span>
            <span class="spa2">忘记密码?</span>
        </div>
      </template>
    </div>
    
    <div class="min">
      <div style="padding:0 5%">
        <van-button color="#ec7b67" size="large" style="font-weight:bold;">登录</van-button>
      </div>
      <div style="text-align:center">
        <router-link to="/register"><p style="color:#ec7b67;margin-top: 15px;">注册新用户</p></router-link>
      </div>
      <div class="other">
        <p style="color:#999999;">或通过以下方式登录</p>
        <img src="../../assets/img/l_4_h.png"/>
        <img src="../../assets/img/l_1_h.png"/>
        <img src="../../assets/img/l_2_h.png"/>
      </div>
      <p class="last">
        <span style="color:#cecece">登录或注册代表您同意</span><span style="color:#ec7b67">用户服务协议</span>
      </p>
    </div>
    
  </div>
  
</template>

<script setup lang="ts">
  import {ref} from 'vue'

  let value1 =ref ('')
  let sms = ref('')

  let tele = ref('')
  let pwd = ref('')

  //验证码倒计时
    let time = ref(60)
    let txt = ref('获取验证码')
    function btn(){
      txt.value = time.value + 's'
      let dsq = setTimeout(()=>{
        time.value--
        txt.value = time.value + 's'
        btn()
      },1000)
      if(time.value==0){
          txt.value = '再次获取'
          clearTimeout(dsq)
          time.value=60
        }
      
    }


    //组件跳转
    let bool = ref(true)
    let boolpwd = ref(false)
    function jump(){
      bool.value=false
      boolpwd.value = true
    }
    function jumpmess(){
      bool.value = true
      boolpwd.value = false
    }
</script>

<style scoped>
  .max{
    width: 100%;
    height: 100%;
    background-color: #f4f1ec;
   }
  .img{
    width: 100%;
    text-align:center;

  }
  .ver{
        width: 100%;
        background-color: white;
        border-radius:40px 40px 0 0;
    }
  .min{
    background-color: white;
    padding-top: 20px;
    text-align:center;
  }
  .other{
    margin-top: 30px;
  }
  .other img{
    margin: 15px 5%;
  }
  .last{
    font-size: 14px;
    margin-top: 15px;
  }
  .input{
      margin-top: 20px;
      text-align: center;
    }
    .dd{
        width:100%;
        position: relative;
    }
    .spa2{
      position: absolute;right: 5%;
    }
    .van-field:focus-within{
      border: 1px solid #ec7b67;
      background-color: red;
    }
</style>